<template>
  <div>
    <!-- <div>推荐商家</div> -->
    <div v-for="(items, index) in datalists" :key="index">
      <section>
        <div class="shop-top">
          <div class="shang-left">
            <img
              src="https://fuss10.elemecdn.com/4/92/519e037e4d0b03ee716e4841797adjpeg.jpeg?imageMogr/thumbnail/!130x130r/gravity/Center/crop/130x130/"
              alt
            >
          </div>

          <div class="shang-right">
            <div class="title">
              <span>味蕾上海灌汤生煎包锅贴</span>
            </div>

            <div class="peisong">
              <div class="peisong-left">
                <span>4.6</span>
                <span>月售卖1034单</span>
              </div>
              <div class="peisong-fight">
                <span>蜂鸟专送</span>
              </div>
            </div>

            <div class="juli">
              <div class="shuxian">
                <span id="qisong">￥20起送</span>
                <span>配送费￥5</span>
              </div>
              <div class="shuxian">
                <span>1.83km</span>
                <span>30分钟</span>
              </div>
            </div>
          </div>
        </div>
        <div class="shop-xia">
          <div class="shop-xias">
            <div class="shop-xia-z">
              <span class="style">新疆菜</span>
              <span class="ziqu">支持自取</span>
              <span class="lianmeng">品质联盟</span>
              <span class="koubei">口碑人气好店</span>
            </div>

            <div class="shop-xia-x">
              <div class="shop-xia-x-left">
                <span class="shop-xia-x-left-title">减</span> <span class="shop-xia-x-left-content">满20减20，满42减22，满78减30</span>
              </div>
              <div class="shop-xia-x-right">5个活动</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      datalists:[]
    }
  },
  created(){
    // https://h5.ele.me/restapi/shopping/v3/restaurants?latitude=34.718669&longitude=113.841272&offset=16&limit=8&extras[]=activities&extras[]=tags&extra_filters=home&rank_id=454c418b298443d9852721bdf3f25211&terminal=h5
    this.$axios.get(`/api/restapi/shopping/v3/restaurants?latitude=34.718669&longitude=113.841272&offset=16&limit=8&extras[]=activities&extras[]=tags&extra_filters=home&rank_id=454c418b298443d9852721bdf3f25211&terminal=h5`)
    .then(res => {
      console.log("获取推荐的内容",res)
      let data = res.items
      // for (let index = 0; index < array.length; index++) {
      //   const element = array[index];
        
      // }
       for (let i = 0; i < data.length; i++) {
        const perdata = data[i];
        
        let image_hash = perdata.restaurant.activities.image_hash
        let shop_name = perdata.restaurant.activities.name

        
      }
      this.datalists = data

    })
  }

};
</script>


<style scoped>
.shop-top {
  padding: 0 2.66667vw 0 3vw;
  display: flex;
}
.shang-left img {
  width: 17.33333vw;
  height: 17.3333vw;
}
.shang-right {
  display: flex;
  flex-grow: 1;
  padding-left: 2.666667vw;
  height: 17.3333vw;
  flex-wrap: space-around;
  justify-content: space-around;
  /* align-items: center; */
  /* -webkit-box-pack: justify; */
  flex-flow: column;
}
.peisong-left span:nth-child(1) {
  padding-right: 1.2vw;
}
.peisong {
  font-size: 0.7rem;
  color: #666;
  display: flex;
  justify-content: space-between;
}
.peisong-fight {
  background-color: aqua;
  padding: 0 1.1vw;
  align-items: flex-end;
}
.title {
  font-size: 1rem;
  color: #333;
  font-weight: 700;
}

.juli {
  font-size: 0.7rem;
  display: flex;
  justify-content: space-between;
  color: #666;
}
.juli ::after {
  /* content: "|";
  color: red; */
}
.shuxian span:nth-child(1) {
  padding-right: 1.5vw;
  /* border-right:1px #333 solid; */
}
/* #qisong ::after{
  content: '|';
  color: red;
} */
.shop-xia-z{
  padding-top: 2vw;
  border-top: #999 1px solid;
}
.shop-xia-z span{
  margin-right: 1vw;
}
.shop-xia {
  margin: 0 2.66667vw 0 3vw;
  font-size: 0.7rem;
}
.shop-xias {
  margin-left: 21vw;
}
.style{
  color: rgb(102, 102, 102);
  border:rgb(221, 221, 221) 1px solid;
  padding: 0 0.4vw;
}
.ziqu{
  opacity: 0.1;
}
.lianmeng{
  color: rgb(51, 51, 51);
  border: rgb(221, 221, 221);
}
.koubei{
  color: #e8470b;
}
.shop-xia-x{
  display: flex;
  justify-content: space-between;
}
.shop-xia-x-left-title{
  padding: 0.2px 0.5px;
  background-color: rgb(240, 115, 115);
  border-radius: 2px;
  margin-right: 2vw;
}
</style>

